@use "sass:color";

$row-handle-selected: color.adjust($query-editor-bg, $lightness: 10%);

& {
  background: $theme-bg;
  color: $text;
}

// Default Statusbar -- Invert text color
.statusbar {

  &.default {
    color: $text;
    .statusbar-item {
      &.error {
        color: $statusbar-text-default;
        .material-icons {
          color: $statusbar-text-default;
        }
      }
    }

    .statusbar-actions .btn,
    .connection-button > .btn {
      color: $statusbar-text-default;
    }
    .connection-button {
      .badge {
        color: $statusbar-text-default;
      }
    }
    .connection-type {
      color: $statusbar-text;
    }

    .btn {
      &.btn-flat {
        background: rgba($statusbar-text-default, 0.05);
        color: $statusbar-text-default;
        &:hover {
          background: rgba($statusbar-text-default, 0.1);
        }
      }
      &.btn-primary {
        background: rgba($statusbar-text-default, 0.2);
        &:hover {
          background: rgba($statusbar-text-default, 0.25);
        }
      }
    }

    .save-actions {
      .btn {
        &.btn-primary {
          background: $theme-base;
          &:hover {
            background: rgba($theme-base, 0.87);
          }
        }
      }

    }

    .select-wrap {
      background: rgba($statusbar-text-default, 0.05);
      &:hover {
        background: rgba($statusbar-text-default, 0.1);
      }
      select {
        color: $statusbar-text-default;
        background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='rgba(255,255,255,0.87'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 98% 60% transparent !important;
      }
    }

    .download-results,
    .pending-changes {
      background: $statusbar-text-default;
      > .btn {
        color: $statusbar-text;
        &:hover, &:hover[expanded] {
          background: rgba($statusbar-text-default, 0.25);
        }
        &[menu], &[menu]:hover {
          border-left: 1px solid rgba($statusbar-text, 0.35);
        }
        .material-icons {
          color: $statusbar-text;
        }
      }
    }
    &.tabulator-footer {
      .tabulator-page {
        color: $statusbar-text-default;
        &.active {
          background: rgba($statusbar-text-default, 0.2);
        }
      }
    }

    // New Pagination
    .tabulator-paginator > div {
      input[type="number"] {
        color: $statusbar-text-default!important;
        border-color: rgba($statusbar-text-default, 0.2);
        &:hover, &:focus {
          border-color: rgba($statusbar-text-default, 0.25);
        }
      }
      a {
        .material-icons {
          color: rgba($statusbar-text-default, 0.68);
          &:hover {
            color: $statusbar-text-default;
          }
        }
      }
    }
  }
}

& {
  // Core theme colors
  --bks-theme-bg: #{$theme-bg};
  --bks-theme-base: #{$theme-base};
  --bks-theme-primary: #{$theme-primary};
  --bks-theme-secondary: #{$theme-secondary};

  // Text colors
  --bks-text-dark: #{$text-dark};
  --bks-text: #{$text};
  --bks-text-light: #{$text-light};
  --bks-text-lighter: #{$text-lighter};
  --bks-text-hint: #{$text-hint};
  --bks-text-disabled: #{$text-disabled};

  // Brand colors
  --bks-brand-info: #{$brand-info};
  --bks-brand-success: #{$brand-success};
  --bks-brand-warning: #{$brand-warning};
  --bks-brand-danger: #{$brand-danger};
  --bks-brand-default: #{$brand-default};
  --bks-brand-purple: #{$brand-purple};
  --bks-brand-pink: #{$brand-pink};
  --bks-brand-primary: #{$brand-primary};
  --bks-brand-secondary: #{$brand-secondary};

  // App colors
  --bks-border-color: #{$border-color};
  --bks-link-color: #{$link-color};
  --bks-placeholder: #{$placeholder};
  --bks-selection: #{$selection};
  --bks-input-highlight: #{$input-highlight};

  // Editor colors
  // --bks-codemirror-hint-bg: #{$codemirror-hint-bg};
  --bks-query-editor-bg: #{$query-editor-bg};
  --bks-db-select-text: #{$db-select-text};

  // Table editing colors
  --bks-row-handle-selected: #{$row-handle-selected};
  --bks-row-handle-hover: #{$row-handle-hover};
  --bks-row-highlight: #{$row-highlight};
  --bks-row-add: #{$row-add};
  --bks-row-delete: #{$row-delete};
  --bks-row-error: #{$row-error};

  --bks-cell-edited: #{$cell-edited};
  --bks-cell-error: #{$cell-error};
  --bks-cell-success: #{$cell-success};

  // Layout colors
  --bks-titlebar-bg: #{$titlebar-bg};
  --bks-global-sidebar-bg: #{$global-sidebar-bg};
  --bks-sidebar-bg: #{$sidebar-bg};
  --bks-sidebar-heading-bg: #{$sidebar-heading-bg};
  // --bks-sidebar-list-icons: #{$sidebar-list-icons};
  --bks-tabs-bg: #{$tabs-bg};
  // --bks-tabs-heading: #{$tabs-heading};
  --bks-grouped-tables-base: #{$grouped-tables-base};
  --bks-grouped-tables-light: #{$grouped-tables-light};

  // --bks-editor-statusbar: #{$editor-statusbar};
  --bks-statusbar-bg: #{$statusbar-bg};
  --bks-statusbar-text: #{$statusbar-text};
  --bks-statusbar-text-default: #{$statusbar-text-default};

  // --bks-tab-link: #{$tab-link};
  // --bks-badge-bg: #{$badge-bg};

  --bks-text-editor-bg-color: #{$query-editor-bg};
  --bks-text-editor-error-bg-color: #{rgba($brand-danger, 0.1)};
  --bks-text-editor-error-fg-color: #{$brand-danger};
  --bks-text-editor-fg-color: #{$text-dark};
  --bks-text-editor-focused-outline-color: transparent;
  --bks-text-editor-foldgutter-fg-color: #{rgba($theme-base, 0.37)};
  --bks-text-editor-foldgutter-fg-color-hover: #{$text-dark};
  --bks-text-editor-gutter-bg-color: #{$query-editor-bg};
  --bks-text-editor-gutter-border-color: transparent;
  --bks-text-editor-highlight-bg-color: #{rgba($brand-warning, 0.3)};
  --bks-text-editor-keyword-fg-color: #{$brand-pink};
  --bks-text-editor-variableName-fg-color: #{$text-dark};
  --bks-text-editor-variable-fg-color: #{$brand-secondary};
  --bks-text-editor-variable-2-fg-color: #{$brand-secondary};
  --bks-text-editor-selected-bg-color: #{rgba($theme-base, 0.25)};
  --bks-text-editor-linenumber-fg-color: #{rgba($theme-base, 0.15)};
  --bks-text-editor-number-fg-color: #{$brand-primary};
  --bks-text-editor-string-fg-color: #{$brand-primary};
  --bks-text-editor-cursor-bg-color: #{$text-dark};
  --bks-text-editor-bracket-fg-color: #{$text};
  --bks-text-editor-name-fg-color: #{$text-dark};
  --bks-text-editor-typeName-fg-color: #{$text-dark};
  --bks-text-editor-sql-alias-fg-color: #{$text-dark};
  --bks-text-editor-sql-field-fg-color: #{$brand-secondary};
  --bks-text-editor-operator-fg-color: #{$text-dark};
  --bks-text-editor-punctuation-fg-color: #{$text-dark};
  --bks-text-editor-separator-fg-color: #{$text-dark};
  --bks-text-editor-type-fg-color: #{$text-dark};

  --bks-text-editor-context-menu-bg-color: #{color.adjust($theme-bg, $lightness: 5%)};
  --bks-text-editor-context-menu-fg-color: #{$text-dark};
  --bks-text-editor-context-menu-item-bg-color-active: #{color.adjust($theme-secondary, $lightness: -25%)};
  --bks-text-editor-context-menu-item-bg-color-hover: #{rgba($theme-base, 0.05)};
  --bks-text-editor-context-menu-item-fg-color-active: #ffffff;

  --bks-mongo-shell-mongo-prompt-fg: #{$theme-primary};
  --bks-mongo-shell-ansi-output-fg: #{$text-dark};
}
